웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

[HTML] 이미지 태그 테두리 삭제하는 방법

Last Modified : 2017-04-24 / Created : 2014-01-31
17,718
View Count
홈페이지를 크로스 브라우징 하는 과정에서 IE, Internet Explorer에서만 생긴 이미지의 테두리를 발견할 수 있다. 이는 구 버전의 IE에서 발견되는데 IE를 확인하지 않는 경우 이런 이슈가 나타나는지 알아채기 어려울 수도 있다.

이 이슈를 간단하게 해결하는 방법은 CSS 제일 첫 부분에 모든 img 태그의 테두리 값, border를 0으로 설정하는게 가장 효과적인 방법이다. 일반적으로 reset.css를 사용하는 경우에 이런 코드가 상단에 포함되어 있다. reset.css와 같은 미리 만들어두어 웹퍼블리싱 할때마다 추가하면 번거로운 작업을 줄일 수 있다.


# 이미지에 border: 0 값을 추가한 코드보기

사실 최근에는 구 버전의 IE를 사용하는 빈도가 낮아 이 이슈는 그리 크지 않다. 하지만 브라우저 사용빈도가 낮다 하더라도 모두 유저가 최적화된 하면을 제공할 수 있도록 아래 코드를 추가해보자.

< style >
  img { border: 0; } //  테두리 사이즈를 0으로 설정하여 제거하는 방법
< /style >

혹시 이미지에 파란 테두리가 나타나는 이슈가 있다면 위 코드를 추가하자.

Previous

[HTML] 테이블 만들기, table 태그를 사용해 레이아웃 구성하기